<!--
bp-nums
备品数量
-->
<template>
    <div class="bp-nums">
        <chart
        chartId="bpnumChart"
        :options="bpnumChartOption"></chart>
    </div>
</template>

<script>
import {
    getBpNums, // 备品数量组件接口
} from '@/apis';

export default {
    name: 'bp-nums',
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    props: {},
    data() {
        return {
            xAxisData: [], // x轴数据 这里是各个电务段
            yAxisData: [], // y轴数据 这里是各个电务段的备品数量值
        };
    },
    computed: {
        // 备品数量 - echats配置
        bpnumChartOption() {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '2%',
                    containLabel: true,
                    show: true,
                    borderColor: '#18498e',
                // backgroundColor: '#f40',
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xAxisData, // ['Mon', 'Tue', 'Wed', 'Thu'],
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            color: '#fff',
                            rotate: -45,
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#18498e',
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#18498e',
                            },
                        },
                    },

                ],
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        barWidth: 28,
                        itemStyle: {
                            borderRadius: [14, 14, 0, 0],
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#3294FF' },
                                { offset: 1, color: 'rgba(23,91,255,0.18)' },
                            ]),
                        },
                        label: {
                            show: true,
                            position: 'insideTop',
                            color: '#fff',
                        },
                        data: this.yAxisData, // [334, 390, 330, 220],
                    },
                ],
            };
        },
    },
    methods: {
        // 获取备品数量
        getBpNumsData() {
            getBpNums().then((res) => {
                const {
                    data,
                    code,
                } = res.data;
                if (code === 200) {
                    this.xAxisData = Object.keys(data);
                    this.yAxisData = Object.values(data);
                }
            }).catch((err) => {
                window.console.log('获取故障超限指标', err);
            });
        },
    },
    created() {
        this.getBpNumsData();
    },
};
</script>
<style lang='scss'>
.bp-nums {
    width: 100%;
    height: 100%;
}
</style>
